import { useStore } from '@/store'
import { computed } from 'vue'
import { generateColors } from '@/utils/color'
import { writeNewStyle } from '@/utils/writeNewStyle'
import { useThemeFiles } from '@/hooks/useThemeFiles'
import { getStyleTemplate } from '@/utils/getStyleTemplate'
import { CHANGE_SETTING } from '@/store/modules/methods-type'

export const useGenerateTheme = () => {
  const store = useStore(),
    defaultTheme = computed(() => store.state.settings.theme),
    originalStyle = computed(() => store.state.settings.originalStyle)

  /* 生成主题 */
  const generateTheme = (color: string) => {
    const colors = Object.assign({
      primary: defaultTheme.value
    }, generateColors(color))
    writeNewStyle(originalStyle.value, colors)
  }

  const { getThemeChalkStyle } = useThemeFiles()
  if ( !originalStyle.value ) {
    getThemeChalkStyle().then(data => {
      const dataValue = getStyleTemplate(data as string)
      store.dispatch(`settings/${ CHANGE_SETTING }`, {key: 'originalStyle', value: dataValue})
      generateTheme(defaultTheme.value)
    })
  } else {
    generateTheme(defaultTheme.value)
  }

  return {
    generateTheme
  }
}
